React Leaflet 지도 라이브러리 환경설정

React-leaflet은 단순히 Leaflet 이라는 지도 라이브러리를 React로 사용할 수 있게 해준다. 때문에 Leaflet관련 설정은 따로 미리 해줘야한다.

정상적으로 맵을 그리려면 html파일을 열고 스타일시트와 스크립트를 먼저 추가한다.

 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
   integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
   crossorigin=""/>

스타일 시트가 로드된 후에 스크립트를 삽입

<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
   integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
   crossorigin=""></script>

다음 커맨드로 npm dependency를 설치한다.

npm i leaflet react-leaflet

CRA로 시작할 경우 package.json에서 browserlist 설정을 다음으로 바꿔야 develop에서 정상적으로 작동한다.

"browserslist": [
   ">0.2%",
  "not dead",
  "not op_mini all"
],

React-Leaflet에 문서에있는 데모 코드를 실행해보자

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import './App.css';

function App() {
  return (
    <div className="App">
      <MapContainer className='map' center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <Marker position={[51.505, -0.09]}>
          <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
          </Popup>
        </Marker>
      </MapContainer>
    </div>
  );
}

export default App;

아무것도 보이지 않으면 MapContainer에 css로 높이를 주면 된다.